<html class="standard">

<head>
    <meta charset="utf-8">
    <title>选择客服</title>
    <link href="../css/im_index/ly/c.css" type="text/css" rel="stylesheet">
    <link href="../css/im_index/ly/main.css" type="text/css" rel="stylesheet">
    <link href="../css/framework/layui.css" type="text/css" rel="stylesheet">
    <link href="../css/im_index/home.css" type="text/css" rel="stylesheet">
    <!-- <link href="../css/framework/bootstrap-theme.css" type="text/css" rel="stylesheet"> -->

</head>

<body>

    <div id="wrap">
        <div id="header">
            <div class="top">
                <ul class="layui-nav">
                    <div id="top" class="top-in">
                        <li class="layui-nav-item home">
                            <a href="../html/home.html" class="active" style="color:#22d7c6">首页</a>
                           </li>
                        <li class="layui-nav-item message">
                            <a href="../html/chat.html">消息</a>
                        </li>
                        <li class="layui-nav-item person; width:auto;">
                            <a href="../html/person.html">
                                <span>
                                    {{nickname}}
                                </span>
                                &nbsp;&nbsp;<img  :src="avatarUrl" class="layui-nav-img"></a>
                        </li>
                        <li class="layui-nav-item">
                                <a href="" class="active" onclick="logout()">退出</a>
                        </li>
                </ul>



            </div>
        </div>

        <div id="service-list">

            <div class="layui-row layui-col-space5  ">
                <span style="font-size: 20px">客服列表</span>
                <hr class="layui-bg-green">
                <div class="layui-col-md4 service" v-for="service in services">
                    <a class="service-a" @click="openChat($event, service)" target="_blank">

                        &nbsp;&nbsp;
                        <img :src="service.avatarUrl" class="layui-nav-img" style="height:60px;width:60px;">
                        <span style="font-size: 19px ;color: #009688;">
                            {{service.shop}}
                        </span>
                        <span style="font-size: 19px">
                            &nbsp;| &nbsp;
                        </span>
                        <span style="font-size: 19px">
                            {{service.serviceName}}
                        </span>
                    </a>
                </div>




            </div>
        </div>

    </div>
    </div>

    </div>


    <script src="../js/framework/vue.js"></script>
    <script src="../js/framework/layui.js"></script>
    <script src="../js/framework/jquery-3.2.1.min.js"></script>
    <script src="../js/im_index/commons.js"></script>
    <script src="../js/framework/bootstrap.min.js"></script>

    <script>
        
        checkRole(0)
        checkLogin()

        // data loading...
        $(function () {

            // 拿到登录的数据
            var account = localStorage.getItem("account");
            var aid = localStorage.getItem("aid");
            var role = localStorage.getItem("role");

            // 个人信息初始化
            topinfo.nickname = localStorage.getItem("nickname");
            topinfo.avatarUrl = localStorage.getItem("avatarUrl");

            getServiceList();

            // 获取客服列表
            function getServiceList() {
                url = "http://127.0.0.1:8080/service/list?account=" + account;
                $.ajax({
                    url: url,
                    type: 'get',
                    contentType: 'application/json; charset=UTF-8',
                    success: function (userList) {
                        service_list.services = userList.data;
                        //   return userList
                    },
                    error: function () {
                        console.log("服务器获取失败");
                    }
                });
            }

            // 获取消息



        });

        

        // 头条个人栏
        var topinfo = new Vue({
            el: '#top',
            data: {
                nickname: "",
                avatarUrl: "",
            },
            methods: {
                openChat: function (event, user) {
                  
                },
            },
        });

        /**
         * 客服列表
         * 选择客服->跳转到聊天列表
         *
         */
        var service_list = new Vue({
            el: '#service-list',
            data: {
                services: [],
                // services: [{
                //         shopId: 121,
                //         serviceId: 13,
                //         avatarUrl: "../img/a.JPG",
                //         serviceName: "田",
                //         shop: "京东"
                //     },
                //     {
                //         shopId: 121,
                //         serviceId: 13,
                //         avatarUrl: "../img/b.JPG",
                //         serviceName: "小兰",
                //         shop: "京东"
                //     },
                //     {
                //         shopId: 121,
                //         serviceId: 13,
                //         avatarUrl: "../img/c.JPG",
                //         serviceName: "安捷",
                //         shop: "盛大1"
                //     },
                //     {
                //         shopId: 121,
                //         serviceId: 13,
                //         avatarUrl: "../img/e.JPG",
                //         serviceName: "天",
                //         shop: "盛大1"
                //     }
                // ],
                // message: "aaa",
            },
            methods: {
                openChat: function (event, user) {
                    window.location.href = "chat.html?serviceId=" + user.serviceId;

                },
            },


        });
    </script>

</body>

</html>